<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<th:block th:include="include :: datetimepicker-css"/>
	<th:block th:include="include :: header('下拉框')"/>
	<th:block th:include="include :: select2-css"/>
	<th:block th:include="include :: bootstrap-select-css"/>
	<th:block th:include="include :: header('日期和时间')"/>
	<th:block th:include="include :: datetimepicker-css"/>
	<th:block th:include="include :: header('Summernote富文本编辑器')"/>
	<th:block th:include="include :: summernote-css"/>
</head>
<body class="white-bg">
<div class="ibox float-e-margins">
	<div class="ibox-title ">
		<h5>修改工单 <span style="color: red;">(请注意修改过后原工单将被关闭, 接单人要重新确认)</span></h5>
		<div class="ibox-content ">
			<form class="form-horizontal" method="post" action="/order/order_edit">
				<div class="form-group">
					<label class="col-sm-4 control-label">工单类型</label>
					<div class="col-sm-2">
						<input th:value="${orderListVo.orderId}" name="orderId" type="hidden" id="orderId" required   class="form-control">
						<input th:value="${orderListVo.typeName}" name="type" type="text" id="type" required placeholder="工单类型" class="form-control">
						<input id="order_content" th:value="${orderListVo.orderContent}" required name="orderContent" type="hidden" placeholder="工单内容"
							   class="form-control">
					</div>
					<button class="btn btn-info " id="chooseType" type="button"><i class="fa fa-paste"></i>快速选择</button>
				</div>

				<div class="form-group">
					<label class="col-sm-4 control-label">客户信息</label>
					<div class="col-sm-1">
						<input th:value="${orderListVo.customerName}" name="customerName" id="customerName" required type="text" placeholder="客户姓名"
							   class="form-control">
					</div>
					<div class="col-sm-2">
						<input th:value="${orderListVo.customerPhone}" name="customerPhone" id="customerPhone" required type="text" placeholder="客户电话"
							   class="form-control">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-4 control-label"></label>
					<div class="col-sm-2">
						<input th:value="${orderListVo.customerAddress}" name="customerAddress" id="customerAddress" required type="text" placeholder="客户地址"
							   class="form-control">
					</div>
					<button class="btn btn-info " onclick="selectCustomer()" type="button"><i class="fa fa-paste"></i>快速选择
					</button>

				</div>
				<div class="form-group">
					<label class="col-sm-4 control-label">接单人</label>
					<div class="col-sm-2">
						<select id="selectWork" name="workerId" class="form-control">
							<option th:value="${orderListVo.workerId} " th:text="${orderListVo.worker}+'  ('+${orderListVo.workerPhone}+')'" >--请选择接单技术员--</option>
							<option th:each="worker:${workers}" th:value="${worker.userId}"
									th:text="${worker.userName}+'  ('+${worker.phonenumber}+')'"></option>
						</select>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-4 control-label">工单标题</label>
					<div class="col-sm-2">
						<input th:value="${orderListVo.orderTitle}" required name="orderTitle" type="text" placeholder="工单标题" class="form-control">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-4 control-label">工单费用</label>
					<div class="col-sm-2">
						<input th:value="${orderListVo.orderMoney}" name="orderMoney" required type="number" placeholder="工单费用" class="form-control"
							   value="0">
					</div>
				</div>

				<div class="form-group">
					<label class="col-sm-4 control-label">开始时间</label>
					<div class="col-sm-2">
						<div class="input-group date">
							<div class="input-group date">
								<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
								<input th:value="${orderListVo.orderStartTime}" required name="orderStartTime" type="text" class="form-control"
									   id="laydate-demo-3"
									   placeholder="yyyy-MM-dd HH:mm:ss">
							</div>
						</div>
					</div>
				</div>
				<div class="form-group">
					<label  class="col-sm-4 control-label">结束时间</label>
					<div class="col-sm-2">
						<div class="input-group date">
							<div class="input-group date">
								<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
								<input th:value="${orderListVo.orderEndTime}" required name="orderEndTime" type="text" class="form-control" id="laydate-demo-4"
									   placeholder="yyyy-MM-dd HH:mm:ss">
							</div>
						</div>
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-2"></div>
					<div class="col-sm-6">
						<div class="ibox float-e-margins">
							<div class="ibox-title">
								<h1>任务详情</h1>
								<h3>(可编辑图片,编辑完必须点保存再提交!!!)</h3>
								<button class="btn btn-primary btn-xs m-l-sm" onclick="edit()" type="button">编辑</button>
								<button class="btn btn-primary  btn-xs" onclick="save()" type="button">保存</button>
							</div>
							<div class="ibox-content" id="eg">
								<div th:utext="${orderListVo.orderContent}" class="click2edit wrapper">
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-2"></div>
					<div class="col-sm-6">
						<button type="submit" onclick="return submitForm()" style="width: 100%"
								class="btn btn-w-m btn-lg btn-primary">提交工单
						</button>
					</div>
				</div>

			</form>
		</div>
	</div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: bootstrap-select-js"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: summernote-js"/>

<script th:inline="javascript">
	$(document).ready(function () {
		$('.summernote').summernote({
			lang: 'zh-CN'
		});
		$('.click2edit').summernote({
			lang: 'zh-CN',
			height: 150
		});
		var tip = [[${tip}]];
		if (tip != null && tip != '') {
			$.modal.msgSuccess(tip)
		}

	});

	function edit() {
		$("#eg").addClass("no-padding");
		$('.click2edit').summernote({
			lang: 'zh-CN',
			focus: true
		});
	}

	function save() {
		$("#eg").removeClass("no-padding");
		var aHTML = $('.click2edit').summernote('code');
		$('.click2edit').summernote('destroy');
		$('#order_content').val(aHTML)
	}

	function submitForm() {
		if ($('#selectWork').val() == '') {
			$.modal.msgError('提交失败,请选择接单人');
			return false;
		}
		if ($('#order_content').val() == '') {
			$.modal.msgError('提交失败,请输入任务内容');
			return false;
		}
		save()
		return true
	}

	$("#chooseType").click(function () {
		var btn = ['<i class="fa fa-check"></i> 确定', '<i class="fa fa-close"></i>  关闭'];
		var options = {
			title: '选择类型',
			width: "400",
			height: "400",
			url: "/order/type",
			btn: btn,
			callBack: setType
		};
		$.modal.openOptions(options);
	})
	function setType(index, layero) {
		var type = layero.find("iframe")[0].contentWindow.$('#type').val();
		console.log("type: "+type)
		$('#type').val(type)
		layer.close(index);
	}

	function selectCustomer() {
		var btn = ['<i class="fa fa-check"></i> 确定', '<i class="fa fa-close"></i> 关闭'];
		var options = {
			title: '选择客户~',
			width: "900",
			height: "620",
			url: "/customer",
			btn: btn,
			callBack: setCustomer
		};
		$.modal.openOptions(options);
	}

	function setCustomer(index, layero) {
		var table = layero.find("iframe")[0].contentWindow.$.table;
		console.log(table)
		let customerName = table.selectColumns("customerName");
		if (customerName.length != 1) {
			$.modal.msgError("请选中一条数据")
			return
		}
		let customerAddress = table.selectColumns("customerAddress");
		let customerPhone = table.selectColumns("customerPhone");
		$("#customerName").val(customerName);
		$("#customerPhone").val(customerPhone);
		$("#customerAddress").val(customerAddress);
		layer.close(index);
	}


	$(function () {

		<!-- datetimepicker示例 -->
		$("#datetimepicker-demo-1").datetimepicker();

		$("#datetimepicker-demo-2").datetimepicker({
			format: "yyyy-mm-dd",
			minView: "month",
			autoclose: true
		});

		$("#datetimepicker-demo-3").datetimepicker({
			format: "yyyy-mm-dd hh:ii:ss",
			autoclose: true
		});

		$('.form_date').datetimepicker({
			format: "yyyy-mm-dd",
			minView: "month",
			autoclose: true
		});

		$("#datetimepicker-startTime").datetimepicker({
			format: 'yyyy-mm-dd',
			minView: "month",
			todayBtn: true,
			autoclose: true,
			endDate: new Date(),
		}).on('changeDate', function (event) {
			event.preventDefault();
			event.stopPropagation();
			var startTime = event.date;
			$('#datetimepicker-endTime').datetimepicker('setStartDate', startTime);
		});

		$("#datetimepicker-endTime").datetimepicker({
			format: 'yyyy-mm-dd',
			minView: "month",
			todayBtn: true,
			autoclose: true,
			endDate: new Date(),
		}).on('changeDate', function (event) {
			event.preventDefault();
			event.stopPropagation();
			var endTime = event.date;
			$("#datetimepicker-startTime").datetimepicker('setEndDate', endTime);
		});

		<!-- laydate示例 -->
		layui.use('laydate', function () {
			var laydate = layui.laydate;

			laydate.render({
				elem: '#laydate-demo-1'
			});

			laydate.render({
				elem: '#laydate-demo-2',
				type: 'date'
			});

			laydate.render({
				elem: '#laydate-demo-3',
				type: 'datetime',
				trigger: 'click'
			});

			laydate.render({
				elem: '#laydate-demo-4',
				type: 'datetime',
				trigger: 'click'
			});
			/* laydate.render({
                 elem: '#laydate-demo-4',
                 range: true
             });*/

			var startDate = laydate.render({
				elem: '#laydate-startTime',
				max: $('#laydate-endTime').val(),
				theme: 'molv',
				trigger: 'click',
				done: function (value, date) {
					// 结束时间大于开始时间
					if (value !== '') {
						endDate.config.min.year = date.year;
						endDate.config.min.month = date.month - 1;
						endDate.config.min.date = date.date;
					} else {
						endDate.config.min.year = '';
						endDate.config.min.month = '';
						endDate.config.min.date = '';
					}
				}
			});

			var endDate = laydate.render({
				elem: '#laydate-endTime',
				min: $('#laydate-startTime').val(),
				theme: 'molv',
				trigger: 'click',
				done: function (value, date) {
					// 开始时间小于结束时间
					if (value !== '') {
						startDate.config.max.year = date.year;
						startDate.config.max.month = date.month - 1;
						startDate.config.max.date = date.date;
					} else {
						startDate.config.max.year = '';
						startDate.config.max.month = '';
						startDate.config.max.date = '';
					}
				}
			});
		});
	});
	// 富文本操作
</script>
</body>


</html>